<template>
  <view>
    <view class="relative">
      <u-navbar :title="pageTitle" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
        title-size="37" />
      <view class="flex w-full flex-column justify-between" id="container" :style="{ minHeight: `calc(100vh - ${top}px)` }">
      <view class="mt-40">
        <view class="p-lr-40 mb-20">
          <view class="fz-30 lh-42  mt-20 flex justify-between border-bottom-CCCCCC pb-30">
            <text class="w-200 font-bold color-333333"><text class="fz-32 color-FF6262">*</text>负责人</text>
            <view class="flex1 flex text-right align-center justify-end color-888888" @tap="chooseResponse">
              <text>{{ receiveInfo.responsibleStaff || "选择负责人" }}</text>
              <image class="w-14 h-28 ml-20" src="@/static/images/common/toPath.png"></image>
            </view>
          </view>

          <view class="fz-30 lh-42  mt-20 flex justify-between border-bottom-CCCCCC pb-30">
            <text class="w-200 font-bold color-333333"><text class="fz-32 color-FF6262">*</text>维修工程师</text>
            <view class="flex1 flex text-right align-center justify-end color-888888" @tap="chooseWorker">
              <text>{{ receiveInfo.repairStaff || "选择工程师" }}</text>
              <image class="w-14 h-28 ml-20" src="@/static/images/common/toPath.png"></image>

            </view>
          </view>

          <view class="fz-30 lh-42 mt-20 pb-30">
            <text class="w-200 font-bold color-333333">维修手册</text>
            <view class="border-CCCCCC pl-10 p-tb-20 mt-20">
              <textarea class="flex1 min-h-240 color-000000" v-model="receiveInfo.handbook" @input="input" auto-height
                placeholder="请输入维修手册" placeholder-style="color:#CCCCCC;font-size:30rpx" maxlength="200"
                :show-confirm-bar="false" />
            </view>
          </view>
        </view>
      </view>

      <view class="h-176 sticky bottom0 bg-fff flex justify-end border-top-EEEEEE">
        <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-50 mt-30" @tap="cancel">
          <text>取消</text>
        </view>
        <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50 mt-30" @tap="confirm">
          <text>确定</text>
        </view>
      </view>
    </view>
    </view>
    <!-- 提交数据load -->
    <u-mask :show="isShowMask" :mask-click-able="false">
      <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
        <text>提交中...</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-mask>

    <!-- 数据未填提示 -->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="errorShow">
      <view class="h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text class="fz-30 color-333333 err-text">{{ modalContent }}</text>
      </view>
    </u-modal>


  </view>
</template>

<script>
import { workOrderAccept , assignEngineer } from "@/api/repair/workOrder"
import getNavBarHeight from "@/mixins/getNavBarHeight";

export default {
  name: 'ReceiveOrder',
  mixins: [getNavBarHeight],
  onLoad (options) {
    if(options.workOrderId){
      this.workOrderId = options.workOrderId
    }
    if(options.hospitalId){
      this.hospitalId = options.hospitalId
    }
    if(options.companyId){
      this.companyId = options.companyId
    }
    if(options.orderData){
      this.receiveInfo = {...this.receiveInfo, ...JSON.parse(decodeURIComponent(options.orderData))}
    }
    this.isTransfer = JSON.parse( options.isTransfer ) || false
  },
  data () {
    return {
      //是否是 转派类型
      isTransfer: false,
      workOrderId: '',
      hospitalId: '',
      companyId:'',
      //接受工单数据
      receiveInfo: {
        responsibleStaff:'',
        responsibleStaffIds:'',
        repairStaff:'',
        staffIds:'',
        handbook:''
      },
      //提交弹框
      isShowMask: false,
      modalContent: '',
      //错误弹框
      errorShow: false,
    }
  },
  computed:{
    pageTitle(){
      return this.isTransfer ? '转派' : '接单'
    }
  },
  methods: {
     //选择负责人
    chooseResponse () {
      this.openChoose('company')
    },
    //选择工程师
    chooseWorker () {
      this.openChoose('hospital')
    },
    // 获取对应的选择列表数据
    openChoose (type) {
      uni.navigateTo({
        url: `/pages/repair/choose-worker?hospitalId=${this.hospitalId}&companyId=${this.companyId}&type=${type}`,
        events: {
          getStaff: (data) => {
            const ids = data.staffList.map(item=>item.staffId).join(",")
            const names = data.staffList.map(item=>item.staffName).join(",")
            if (type=== 'company') {
              this.receiveInfo.responsibleStaff = names
              this.receiveInfo.responsibleStaffIds = ids
            } else {
              this.receiveInfo.repairStaff = names
              this.receiveInfo.staffIds = ids
            }
          }
        }
      })
    },
    cancel () {
      uni.navigateBack({
        delta: 1
      });
    },
    //确认接单
    confirm () {
      if (!(this.receiveInfo.responsibleStaff && this.receiveInfo.repairStaff)) {
        this.modalContent = '有必填项未填！'
        this.errorShow = true
        return
      }
      this.isShowMask = true
      const data = {
        workOrderId: this.workOrderId,
        ...this.receiveInfo
      }
      if (this.isTransfer) {
        assignEngineer(data).then(res => {
          this.isShowMask = false
          this.goBack()
        }).catch(res => {
          this.isShowMask = false
        })
      } else {
        workOrderAccept(data).then(res => {
          this.isShowMask = false
          this.goBack()
        }).catch(res => {
          this.isShowMask = false
        })
      }
    },
    input(e){},
    //返回工单列表
    goBack () {
      this.$tab.switchTab('/pages/tabbar/repair/repair')
    }
  },
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
